<script setup>
import * as echarts from 'echarts'
import { onMounted, defineProps, watch } from 'vue'

const props = defineProps({
  chartData: {
    default: 0,
    type: Number
  },
  amount: {
    default: 0,
    type: Number
  },
  id: {
    default: '',
    type: String
  }
})

const setData = () => {
  const value = props.chartData
  const data = props.amount
  console.log(value,1111)
  const rate = Math.round(value * 100 / 100)
  const a = '万'
  const myChart = echarts.init(document.getElementById(props.id))
  const option = {
    // backgroundColor: 'rgba(16, 33, 71)', // 设置背景颜色
    title: [
      {
        text: '{a|' + (rate / data * 100).toFixed(2) + '}{b|%}',
        show: true,
        x: 'center',
        y: '25%',
        textStyle: {
          rich: {
            a: {
              fontSize: 40,
              color: '#121E36',
              fontWeight: '700'
            },
            b:{
              fontWeight: '400',
              fontSize: 12,
              color: 'rgba(18,30,54,0.6)',
              padding:[10,0,0,3]
            }
          }
        }
      },
      {
        text: '{a|' + rate + '}{b|' + a + '}',
        x: 'center',
        y: '55%',
        borderColor: '#fff',
        textStyle: {
          fontWeight: '700',
          fontSize: 30,
          color: '#121E36',
          rich: {
            a: {
              fontSize: 40,
              color: '#121E36',
              fontWeight: '700'
            },
            b:{
              fontWeight: '400',
              fontSize: 12,
              color: 'rgba(18,30,54,0.6)',
              padding:[10,0,0,3]
            }
          }
        }
      }
    ],
    polar: {
      center: ['50%', '50%'],
      radius: ['82%', '97%']
    },
    angleAxis: {
      max: data,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        data: [value],
        name: '',
        type: 'bar',
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: '#D8DEEA'
        },
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#457AF7'
              },
              {
                offset: 1,
                color: '#457AF7'
              }
            ])
          }
        }
      }
    ]
  }
  myChart.setOption(option)
}

watch(() => props.chartData, () => {
  setData()
})

onMounted(() => {
  setData()
})

</script>
<template>
  <div class="BusinessData-Echarts" :id="props.id"></div>
</template>
<style lang="scss" scoped>
.BusinessData-Echarts {
  width: 100%;
  height: 100%;
}
</style>
